<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
<input> 标签在 HTML 中用于创建用户可以进行数据输入的控件。它是一个自闭合标签，可以根据不同的 type 属性生成各种输入类型，如文本框、单选按钮、复选框等。
-->

<!--常用属性
1. id: 用于给 <input> 设置唯一的标识，通常用于与 <label> 关联。
2. name: 定义 <input> 的名称，用于在表单提交时作为键值对发送。
3. placeholder: 在输入框为空时显示的提示文本。
4. value: 指定 <input> 的默认值。
5. required: 指定该字段在表单中是必填项。
6. readonly: 使输入框只读，用户不能修改内容。
7. disabled: 禁用输入框，用户无法与之交互。-->


<!--常用的 type 属性值及其作用-->

<!--1. 文本输入框 (type="text")-->
<!--创建一个单行文本输入框，用户可以输入普通文本。-->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">


<!--2. 密码输入框 (type="password")-->
<!--创建一个密码输入框，输入内容会以隐藏符号（如 * 或 ●）显示。-->

<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">

<!--3. 电子邮件输入框 (type="email")-->
<!--用于输入电子邮件地址，浏览器会进行简单的格式验证。-->

<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">

<!--4. 数字输入框 (type="number")-->
<!--用于输入数字，可以设置 min、max 和 step 属性来限制输入范围和步进值。-->

<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="1" max="100">

<!--5. 单选按钮 (type="radio")-->
<!--用于创建一组选项，用户只能选择其中一个。-->

<p>性别:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<!--6. 复选框 (type="checkbox")-->
<!--用于创建一组选项，用户可以选择其中的多个。-->

<p>兴趣爱好:</p>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>

<!--7. 日期选择器 (type="date")-->
<!--用于选择日期，浏览器会显示一个日期选择控件。-->

<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">

<!--8. 提交按钮 (type="submit")-->
<!--用于提交表单。-->
<input type="submit" value="提交">

<!--9. 重置按钮 (type="reset")-->
<!--用于重置表单中的输入内容。-->

<input type="reset" value="重置">


</body>



</html>